<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <style>
      div {
        border: 2px solid deepskyblue;
        border-radius: 3px;
      }
      .container {
        display: flex;
        flex-direction: row;/*主轴的方向 横向*/
        padding: 5px;
        height: 300px;
        justify-content: flex-start;
        gap: 10px;
      }
      #i1 {
        align-self: flex-start;/*子项目在交叉轴(纵向)的位置*/
      }
      #i2 {
        align-self: center;
      }
      #i3 {
        align-self: flex-end;
      }
      #i4 {
        align-self: stretch; /*默认撑开*/
      }
    </style>
</head>
<body>
  <div class="container">
    <div id="i1">Hello</div>
    <div id="i2">to</div>
    <div id="i3">the</div>
    <div id="i4">world</div>
  </div>
</body>
</html>